<!--
 * @FilePath: VideoModle.vue
 * @Author: jack
 * @Date: 2025-05-06 11:55:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-06 12:01:23
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<!-- <template>
  <div class="screenLeft" :style="{ height: props.Height + 'px' }">
    <video id="video" autoplay muted playsinline loop></video>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch, nextTick } from "vue";
import $util from "../../util/util";
import "../../assets/adapter.min.js";
import "../../assets/webrtcstreamer.js";
import { PiniaStore } from "../../store";
interface PropsType {
  Height?: number;
}
const props = withDefaults(defineProps<PropsType>(), {
  Height: 144,
});
const store = PiniaStore()
const video = ref<any>(null)
const rtsp = ref<any>(null)
watch(
  () => store.socketStatus,
  (newVal, oldVal) => {
    if (!newVal) {
      webRtcServer.value.disconnect();
      webRtcServer.value = null;
      initWebRtcServer()
    }
  },
  { deep: true }
);
const innerHeight = ref<number>(window.innerHeight);
//获取webRtc服务
const webRtcServer = ref<any>();
const initWebRtcServer = async () => {
  nextTick(() => {
    // video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    // webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')
    webRtcServer.value = new WebRtcStreamer("video", video.value);
    //需要查看的rtsp地址
    webRtcServer.value.connect(rtsp.value);
  });
};
//页面销毁时销毁webRtc
const webRtcServerDis = computed(() => {
  webRtcServer.value.disconnect();
  webRtcServer.value = null;
});
onMounted(async () => {
  const url = window.location.href;
  if ($util.GetArgsFromHref(url, "video")) {
     video.value = $util.GetArgsFromHref(url, "video");
    rtsp.value = $util.GetArgsFromHref(url, "rtsp");
    initWebRtcServer();
  }
});
</script>
<style lang="scss" scoped>
.screenLeft {
  height: 100%;
  padding: 50px 40px 40px 70px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;

  #video {
    width: 100%;
    // height: 100%;
    border-radius: 4px;
    object-fit: cover;
  }
}
</style> -->
